<template>
  <div>
    <div class="ui top segment" style="text-align: center">
      <h2 class="m-text-500">分类 {{ categoryName }} 下的文章</h2>
    </div>
    <BlogList
      :loadData="selectBlogListByCategoryId"
      :blogList="blogList"
      :totalPage="totalPage"
    />
  </div>
</template>

<script>
import BlogList from '@/components/blog/BlogList'
import { selectListByPage } from '@/api/blog'
import { findById } from '@/api/category'
export default {
  name: 'Category',
  components: { BlogList },
  data() {
    return {
      categoryName: '',
      blogList: [],
      totalPage: 0,
      queryInfo: {
        page: {
          page: 1,
          limit: 3
        },
        categoryId: 0
      }
    }
  },
  watch: {
    //在当前组件被重用时，要重新获取博客列表
    '$route.fullPath'() {
      if (this.$route.name === 'category') {
        this.selectBlogListByCategoryId()
      }
    }
  },
  created() {
    this.selectBlogListByCategoryId()
  },
  computed: {
    categoryId() {
      return this.$route.params.categoryId
    }
  },
  methods: {
    /**
     * 根据分类id查询博客
     *
     * @param {*} pageNum
     * @return {*}
     * @description:
     * @author: WangJin
     * @date: 2023-07-07 15:14:12
     */
    selectBlogListByCategoryId(pageNum) {
      this.queryInfo.categoryId = this.categoryId
      this.queryInfo.page.page = pageNum ? pageNum : 1
      const token = this.$store.getters.token
      this.queryInfo.adminToken = token
      selectListByPage(this.queryInfo).then(res => {
        this.blogList = res.data.rows
        this.totalPage = res.data.totalPage
        this.$nextTick(() => {
          Prism.highlightAll()
        })
      })
      findById(this.categoryId).then(res => {
        this.categoryName = res.data.categoryName
      })
    }
  }
}
</script>

<style scoped></style>
